@import url('https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

*{
    box-sizing: border-box;
}
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin:0;
}





/*Eres realmente saludable?*/
.entradaSaludable {
    position: relative;
    width: 100%;
    display: flex;
    overflow: hidden; /* Para recortar el contenido que se desborde */
    flex-direction: row-reverse; /* Invierte el orden de los elementos */
    background-image: url('img/fondoEresSaludable.avif'); /* Ruta de la imagen de fondo */
    background-size: cover; /* Ajusta el tamaño de la imagen para cubrir todo el contenedor */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    align-items: stretch; /* Asegura que los elementos hijos tengan la misma altura */
}

.entradaSaludable img {
    width: 50%; 
}

@keyframes moveContent {
    from {
        transform: translateX(-100%); /* Comienza fuera de la vista, a la izquierda */
    }
    to {
        transform: translateX(0); /* Termina en su posición original */
    }
}


.ladoIzquierdo {
    animation: moveContent 5s forwards; /* Aplica la animación y detiene en la posición final */
    color: white;
    background-color: rgba(128, 0, 0, 0.8); /* Fondo color maroon con opacidad */
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2%;
    box-sizing: border-box;
}
.ladoIzquierdo p {
    margin-bottom: 1%;
}
.ladoIzquierdo p {
    margin-bottom: 0;
}








/*Como nos enfermamos*/
.comoNosEnfermamos {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    position: relative;
}

/* Contenedor para la imagen y los textos */
.contenedorImagen {
    position: relative;
    width: 100%;
}

/* Estilos para la imagen */
.contenedorImagen img {
    width:100%;
    height: 700px;
    display: block;
}

/* Estilos para el contenedor de texto */
.contenedorSolo {
    position: absolute;
    top: 43%; /* Ajusta el valor para mover el contenedor más arriba */
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(128, 0, 0, 0.8);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    animation: breathing 3s ease-in-out infinite;
}

@keyframes breathing {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.05);
        opacity: 0.8;
    }
}



/* Estilos para el título */
.contenedorSolo h2 {
    font-size: 2em;
    color: white;
    margin-bottom: 20px;
}

/* Estilos para la lista */
.contenedorSolo ul {
    list-style-type: none;
    padding: 0;
}

.contenedorSolo ul li {
    font-size: 1.2em;
    color: white;
    margin-bottom: 10px;
    position: relative;
    padding-left: 25px;
}

.contenedorSolo ul li::before {
    content: "\2022";
    color: #007BFF;
    font-weight: bold;
    display: inline-block;
    width: 20px;
    margin-left: -20px;
}

/* Estilos para el resumen */
.contenedorImagen h3 {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(128, 0, 0, 0.8);
    padding: 10px 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    font-size: 1.5em;
    color: white;
    max-width: 90%;
    width: auto;
}

/* Estilos responsivos */
@media (max-width: 910px) {
    .contenedorSolo {
        padding: 15px;
        font-size: 1em;
        width: 80%;
        top: 40%; /* Ajusta el valor para mover el contenedor más arriba */
    }

    .contenedorSolo h2 {
        font-size: 1.5em;
    }

    .contenedorSolo ul li {
        font-size: 1em;
    }

    .contenedorImagen h3 {
        padding: 10px;
        font-size: 1.2em;
    }
}


  













/*Sector solucion*/
.soloTitulo{
    text-align: center;
    font-size: 3rem;
   
}
.solucion {
    width: 80%;
    margin: auto;
    position: relative;
    display: flex;
    align-items: center; /* Centra verticalmente */
    justify-content: center;
}

.solucion img {
    width: 35%;
    position: relative;
    z-index: 1;
}

.contenedorTxtSolucion {
    width: 50%;
    border-radius: 35px;
    background-color: rgba(128, 0, 0, 1); 
    color: rgb(238, 255, 0); 
    padding: 2%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border: 2px solid white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    position: relative;
    left: -20%; /* Inicialmente fuera de la pantalla a la izquierda */
    transition: left 0.5s ease-in-out; /* Transición suave para el movimiento */
}

.slide-in {
    left: 0%;
}
.contenedorTxtSolucion h3 {
  text-align: center;
}
.solucion {
    width: 80%;
    margin: auto;
    position: relative;
    display: flex;
    align-items: center; /* Centra verticalmente */
    justify-content: center;
}

.solucion img {
    width: 35%;
    position: relative;
    z-index: 1;
}

.contenedorTxtSolucion {
    width: 50%;
    border-radius: 35px;
    background-color: rgba(128, 0, 0, 1); 
    color: rgb(238, 255, 0); 
    padding: 2%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border: 2px solid white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    position: relative;
    left: -20%; /* Inicialmente fuera de la pantalla a la izquierda */
    transition: left 0.5s ease-in-out; /* Transición suave para el movimiento */
}

.slide-in {
    left: 0%;
}
.contenedorTxtSolucion h3 {
  text-align: center;
}



























/*Seccion 4 pilares*/
.contenedor4pilares {
    display: flex; /* Utiliza Flexbox para distribuir en una sola línea */
    justify-content: space-between; /* Distribuye los elementos con espacio entre ellos */
    align-items: center; /* Centra verticalmente los elementos */
    background-image: url('img/fondoCielo.avif'); /* Agrega una imagen de fondo */
    background-size: cover; /* Ajusta el tamaño de la imagen para cubrir el contenedor */
    background-position: center; /* Centra la imagen de fondo */
    overflow: hidden;
}
.contenedorPilar {
    position: relative;
    width: 100%; /* Ajusta el ancho según tus necesidades */
    margin: 0 auto; /* Centra horizontalmente */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra los elementos horizontalmente */
    justify-content: center; /* Centra los elementos verticalmente */
    text-align: center; /* Alinea el texto al centro */
    padding: 20px; /* Espacio interno */
    color: white; /* Color del texto */
    border-radius: 10px; /* Bordes redondeados */
}
.contenedorPilar img {
    display: block; /* Asegura que la imagen sea un bloque para centrarla */
    width: 100%; /* Ocupa todo el ancho disponible */
    border-radius: 10px; /* Bordes redondeados */
    opacity: 0; /* Inicialmente, las imágenes no son visibles */
    transform: translateY(50px); /* Las imágenes empiezan desplazadas hacia abajo */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Transición suave */
}

.contenedorPilar img.aparecer-abajo-arriba {
    opacity: 1; /* Mostrar la imagen cuando se hace visible */
    transform: translateY(0); /* Mover la imagen hacia arriba */
}

.contenidoPilar {
    position: absolute;
    transform: translate(-50%, -50%); /* Centra completamente */
    text-align: center; /* Alinea el texto al centro */
    padding: 5% 3%; /* Espacio interno */
    background-color: rgba(255, 255, 255, 0.5); /* Fondo semi-transparente */
    color: black; /* Color del texto */
    border-radius: 10px; /* Bordes redondeados */
    width: 70%; /* Ancho del contenedor */
    height: 60%; /* Altura del contenedor */
    max-width: 80%; /* Ancho máximo */
    max-height: 80%; /* Altura máxima */
    overflow: auto; /* Agrega scroll si es necesario */
    text-shadow: 0 0 1rem rgba(0, 0, 0, 0.5); /* Sombra del texto */
    opacity: 1;
    transform: scale(1); /* Escala inicial reducida */
}
.contenidoPilar h4 {
    font-size: 1.5em; /* Tamaño del título */
    margin-bottom: 10px; /* Espacio inferior */
}
.contenidoPilar p {
    font-size: 1em; /* Tamaño del texto */
    line-height: 1.5; /* Espaciado entre líneas */
}
/* Estilos para pantallas pequeñas */























/*seccion superalimentos*/
.superAliment{
  display: flex;
  margin: 1% 0;

  opacity: 0; /* Inicialmente, el elemento estará invisible */
  transform: translateY(20px); /* Movimiento inicial hacia abajo */
  transition: opacity 0.5s ease, transform 0.5s ease; /* Transiciones suaves para opacity y transform */
}
.superAliment.aparecerUnicaVez {
    opacity: 1; /* Mostrar el elemento cuando se aplica la clase aparecer */
    transform: translateY(0); /* Eliminar el desplazamiento inicial */
}

.superAliment img {
    width: 60%;
    height: auto; /*Modificar en responsive */
}
.lateral {
    background-color: rgba(128, 0, 0, 0.9);
    color: white; /* Texto blanco */
    padding: 3%; /* Espaciado interno */
    width: 40%;
    height: 600px;
}
.lateral h3 {
    text-align: center;
}



/* Estilos para celulares */
@media (max-width: 767px) {
    .entradaSaludable {
        flex-direction: column; /* Cambia la dirección a columna en pantallas pequeñas */
        background-image: none; /* Elimina la imagen de fondo en pantallas muy pequeñas */
    }
   .ladoIzquierdo{
    background-color: rgba(128, 0, 0, 1); /* Fondo color maroon con opacidad */
   }
    .entradaSaludable img,
    .ladoIzquierdo {
        width: 100%; /* Ambos elementos toman el ancho completo en pantallas pequeñas */
    }

    .ladoIzquierdo {
        padding: 4%; /* Incrementa el padding para pantallas pequeñas */
        animation: moveContent 3s forwards; /* Ajusta la duración de la animación */
    }
    .ladoIzquierdo h2{
        font-size: 1.25rem; /* 20px */
    }
    .ladoIzquierdo p{
        font-size: 0.875rem; /* 14px */
    }
    
    .ContenedorTxt h3{
        font-size: 1.125rem; /* 18px */
    }
   


    .contenedorTxtSolucion{
       width:100%;
       padding:3%;
    }
    .contenedorTxtSolucion ul li{
     font-size: 0.875rem; 
    }
   .contenedorTxtSolucion  h3{
    font-size: 1.125rem; /* 18px */
   }




  /*seccion 4 pilares*/
  .contenedor4pilares {
    flex-direction: column; /* Cambia la dirección a columna */
    align-items: center; /* Centra los elementos horizontalmente */
   }
  .contenedorPilar {
    width: 70%; /* Ajusta el ancho para ocupar todo el espacio disponible */
    margin: 10px 0; /* Espaciado vertical entre los contenedores */
    padding: 10px; /* Espaciado interno más pequeño */
  }
  .contenidoPilar {
    width: 90%; /* Ajusta el ancho para pantallas más pequeñas */
    height: auto; /* Permite que la altura se ajuste automáticamente */
    padding: 10px; /* Espaciado interno */
  }




  .superAliment{
    flex-direction: column;
    margin: 50px 0;
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.5);
  }
  .superAliment img{
    width: 100%;
    height: auto;
  }
  .lateral{
    padding: 25px;
    width:100%;
    height: auto;
  }
   }






 /* Estilos para tabletas */
@media (min-width: 768px) and (max-width: 1124px) {
    .ladoIzquierdo h2{
        font-size: 1.75rem; /* 28px */
    }
    .ladoIzquierdo p{
        font-size: 1rem;
    }

    .contenedorSolo {
        padding: 15px;
        font-size: 1em;
        width: 80%;
        top: 35%; /* Ajusta el valor para mover el contenedor más arriba */
    }




    .contenedor4pilares {
        display: flex;
        flex-wrap: wrap;
    }
    .contenedorPilar {
        width: 50%; /* Ajusta el ancho para ocupar todo el espacio disponible */
        margin: 10px 0; /* Espaciado vertical entre los contenedores */
        padding: 10px; /* Espaciado interno más pequeño */
    }
    .contenidoPilar {
        width: 90%; /* Ajusta el ancho para pantallas más pequeñas */
        height: auto; /* Permite que la altura se ajuste automáticamente */
        padding: 10px; /* Espaciado interno */
    }

    .lateral {
        background-color: rgba(128, 0, 0, 0.9);
        color: white; /* Texto blanco */
        padding: 3%; /* Espaciado interno */
        width: 40%;
        height: auto;
    }

    
}



/* Estilos para computadoras de escritorio */

@media (min-width: 1025px) {
    .ladoIzquierdo h2{
        font-size: 2rem; /* 32px */
    }
    .ladoIzquierdo p{
        font-size: 1.125rem; /* 18px */
    }

}